<template>
  <div class="UserManagementTabs">
    <div class="ele-content">
      <div class="ele-to-sl">
        <div />
        <div>
          <el-button
            type="primary"
            @click="addStaff"
          >添加员工</el-button>
        </div>
      </div>
    </div>
    <div class="custom-item">
      <el-table
        v-loading="loading"
        :data="BindTable"
        height="400"
        stripe
        :header-cell-style="headerStyle"
      >
        <el-table-column
          label="ID"
          header-align="center"
          align="center"
          prop="id"
        />
        <el-table-column
          label="姓名"
          header-align="center"
          align="center"
          prop="userName"
        />
        <el-table-column
          label="联系方式"
          header-align="center"
          align="center"
          prop="phone"
        />
        <el-table-column
          label="类型"
          prop="hasSystem"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hasSystem == '0'">无运维后台</span>
            <span v-else-if="scope.row.hasSystem == '1'">有运维后台</span>
          </template>
        </el-table-column>
        <el-table-column
          label="角色"
          prop="roles"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.roles.includes('0')">配送员&nbsp;&nbsp;</span>
            <span v-if="scope.row.roles.includes('1')">配货员&nbsp;&nbsp;</span>
            <span v-if="scope.row.roles.includes('2')">维护</span>
          </template>
        </el-table-column>
        <el-table-column
          label="IC卡"
          prop="icCard"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="120"
          header-align="right"
          align="right"
        >
          <template slot-scope="scope">
            <div class="ele-template">
              <el-button
                type="text"
                @click="
                  $router.push({
                    name: 'AddStaff',
                    query:{
                      p: $ed({
                        state: 'edit', row: scope.row
                      })}
                  })
                "
              >编辑</el-button>
              <el-button
                type="text"
                class="cus-leftdel-btn"
                @click="handelRemove(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div />
        <div>
          <el-pagination
            :current-page="pages.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pages.pageSize"
            layout="total,sizes,prev,pager,next,jumper"
            :total="pages.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** 员工管理 */
import { StaffMangeList, employee } from '@/api/customAPI/shop/staffManage'
export default {
  name: 'ContorlTabs',
  props: {
    storeId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      pattern: {
        reason: [{ required: true, message: '原因不能为空', trigger: 'blur' }]
      },
      BindTable: [],
      pages: {
        pageIndex: 1,
        pageSzie: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.inititalInfo()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.inititalInfo()
    })
  },
  methods: {
    /** 删除 */
    handelRemove(row) {
      this.$confirm('你确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(result => {
          employee({
            staffIds: row.id,
            storeId: this.storeId
          })
            .then(result => {
              this.$message.success('成功')
              this.inititalInfo()
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    inititalInfo() {
      this.loading = true
      StaffMangeList({
        keySearch: '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSzie,
        storeId: this.storeId
      }).then(inf => {
        this.BindTable = inf.data.data.list
        this.pages.total = inf.data.data.total
        this.loading = false
      })
    },
    addStaff() {
      this.$router.push({
        name: 'AddStaff',
        query: {
          p: this.$ed(
            {
              storeId: this.storeId
            }
          )
        }
      })
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return {
          background: '#f3f3f3'
        }
      } else {
        return ''
      }
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.maringleft {
  margin-left: 12px;
}
.UserManagementTabs {
  .ele-content {
    width: 100%;
    .ele-to-sl {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
  }
  .custom-item {
    width: 100%;
    .ele-template {
      display: flex;
      justify-content: space-between;
      .cus-leftdel-btn {
        color: red;
      }
    }
    .pagination {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      margin-bottom: 100px;
    }
  }
}
</style>
